<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米账号 - 登录</title>
        <link rel="icon" href="https://s01.mifile.cn/favicon.ico">
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .wrapper{
                width: 100%;
                height: 700px;
            }
            .header{
                width: 100%;
                height: 98px;
            }
            .header-logo{
                width: 1130px;
                height: 98px;
                margin: 0 auto;
            }
            .logo{
                width: 200px;
                height: 98px;
                background: url("XM-logo.png");
            }
            .logo a{
                display: block;
                width: 200px;
                height: 98px;
            }
            .contents{
                width: 100%;
                height: 100%;
                position: relative;
            }
            .xm-bg{
                width: 100%;
                height: 588px;
                background-image: url("XM-bg.jpg");
                background-repeat: no-repeat;
                position: absolute;
                left: 0;
                background-position: top center;
            }
            .xm-bg a{
                display: block;
                height: 588px;
                width: 100%;
            }
           /* .content{
                width: 1130px;
                height: 686px;
                margin: 0 auto;
                position: relative;
            }*/
            .content-login{
                box-sizing: border-box;
                width: 410px;
                height: 556px;
                background: #fff;
                position:relative;
                top: 32px;
                left: 915px;
            }
            .login-ch{
                width: 410px;
                height: 83px;
            }
            .login-item{
                width: 410px;
                height: 83px;
                box-sizing: border-box;
                padding: 27px 0 24px;
                text-align: center;
                font-size: 24px;
            }
            .login-text {
                color: #666;
                cursor: pointer;
            }
            .login-text:hover{
                color: #f56600;
            }
            .line{
                width: 1px;
                height: 20px;
                font-size: 20px;
                margin: 0 38px 0 39px;
                border: 1px solid #e0e0e0;
            }
            .login-box{
                width: 410px;
                height: 100%;
                position: relative;
            }
            .login-margin{
                width: 348px;
                height: 100%;
                margin: 0 auto;
            }
            .login-input{
                width: 348px;
                height: 124px;
                position: relative;

            }
            .user-input{
                top: 10px;
                width: 100%;
                height: 50px;
                margin-bottom: 14px;
                border: 1px solid #e0e0e0;
                margin-top: 10px;
            }
            .user-input input{
                width: 318px;
                height: 22px;
                line-height: 22px;
                padding: 13px 16px 13px 14px;
                display: block;
                border: 0 none;
                outline: none;
            }
            .pwd-input{
                width: 100%;
                height: 50px;
                margin-bottom: 14px;
                top: 14px;
                border: 1px solid #e0e0e0;
            }
            .pwd-input input{
                width: 318px;
                height: 22px;
                line-height: 22px;
                padding: 13px 16px 13px 14px;
                display: block;
                border: 0 none;
                outline: none;
            }
            input::-webkit-input-placeholder{
                color: #757575;
            }
            .login-button{
                padding-top: 15px;

            }
            .login-button input{
                background-color: #ff6700;
                width: 100%;
                height: 50px;
                line-height: 50px;
                display: block;
                margin-bottom: 14px;
                text-align: center;
                font-size: 14px;
                color: #fff;
                cursor: pointer;
                border: 0 none;
            }
            .other-login{
                width: 348px;
                height: 210px;
            }
            .other-login a{
                text-decoration: none;
                color: #ff6700;
                font-size: 14px;
            }
            .reg{
                float: right;
            }
            .reg a{
                color: #999999;
            }
            .reg span{
                color: #999999;
                font-size: 14px;
            }
            fieldset {
                border: 0;
            }
            .oth_type_tit {
                border-top: 1px solid #e0e0e0;
                padding-top: 10px;
                text-align: center;
                margin-top: 134px;
            }
            .oth_type_txt {
                color: #bbb;
            }
            .login-links{
                width: 348px;
                height: 37px;
                text-align: center;
            }
            .icon-type{
                display: inline-block;
                margin: 0 17px;
                width: 30px;
                height: 30px;
                border-radius: 50%;
            }
            .btn-qq{
                background: #0288d1;
            }
            .btn-wb{
                background: #d32f2f;
            }
            .btn-zfb{
                background: #00aaee;
            }
            .btn-wx{
                background: #00d20d;
            }
            .icon{
                display: block;
                background: url("icons_type.png");
                width: 18px;
                height: 18px;
            }
            .icon-qq{
                margin: 4px auto 0;
                background-position: -19px 0;
            }
            .icon-wb{
                margin: 4px auto 0;
                background-position:-37px 0 ;
            }
            .icon-zfb{
                width: 25px;
                margin: 4px auto 0;
                background-position:-57px 0 ;
            }
            .icon-wx{
                width: 24px;
                margin: 4px auto 0;
                background-position:-83px 0 ;
            }
            .reg-reg:hover{
                color: #ff6700;
            }
            .reg-forgot:hover{
                color: #ff6700;
            }

        </style>

    </head>
    <body>

        <div class="wrapper">

            <div class="header">
                <div class="header-logo">
                    <div class="logo">
                        <a target="-_parent" href="https: //www.mi.com/index.html"></a>
                    </div>
                </div>
            </div>

            <div class="contents">

                <div class="xm-bg">
                    <!--背景图片和链接 -->
                    <a href="https://item.mi.com/product/10000223"></a>
                </div>

                <!--登录表单-->
                <div class="content-login">
                    <!--密码登录选择-->
                    <div class="login-ch">
                        <div class="login-item">
                            <a class="login-text account">账号登录</a>
                            <span class="line"></span>
                            <a class="login-text sweep">扫码登录</a>
                        </div>
                    </div>

                    <div class="login-box">
                        <div class="login-margin">
                            <!--账号密码输入界面-->
                            <div class="login-input">
                                <div class="user-input">
                                    <input type="text" placeholder="邮箱/手机号码/小米ID">
                                </div>
                                <div class="pwd-input">
                                    <input type="password" placeholder="密码">
                                </div>
                            </div>
                            <!---->
                            <div class="login-button">
                                <input type="button" value="登录">
                            </div>

                            <div class="other-login">
                                <span><a href="">手机短信登录/注册</a></span>
                                <div class="reg">
                                    <a class="reg-reg" href="https://account.xiaomi.com/pass/register?callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252F%26sign%3DNzY3MDk1YzczNmUwMGM4ODAxOWE0NjRiNTU5ZGQyMzFhYjFmOGU0Nw%2C%2C&sid=mi_eshop&_bannerBiz=mistore&_qrsize=180">立即注册</a>
                                    <span>|</span>
                                    <a class="reg-forgot" href="https://account.xiaomi.com/pass/forgetPassword?callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252F%26sign%3DNzY3MDk1YzczNmUwMGM4ODAxOWE0NjRiNTU5ZGQyMzFhYjFmOGU0Nw%2C%2C&sid=mi_eshop&_bannerBiz=mistore&_qrsize=180">忘记密码？</a>
                                </div>

                                <fieldset class="oth_type_tit">
                                    <legend class="oth_type_txt">其他方式登录</legend>
                                </fieldset>

                                <div class="login-links">

                                    <a class="icon-type btn-qq" target="_blank" title="qq登录" href="/pass/sns/login/auth?appid=100284651&&callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252F%253Fclient_id%253D180100041080%26sign%3DOGIxNzgyNjZlM2FlMTM2OWU1ZTJlYmQ4MzU1M2E2YzNlZWQ2Yjg1Nw%2C%2C&sid=mi_eshop">
                                        <i class="icon icon-qq"></i>
                                    </a>

                                    <a class="icon-type btn-wb" target="_blank" title="微博登录" href="/pass/sns/login/auth?appid=2996826273&&callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252F%253Fclient_id%253D180100041080%26sign%3DOGIxNzgyNjZlM2FlMTM2OWU1ZTJlYmQ4MzU1M2E2YzNlZWQ2Yjg1Nw%2C%2C&sid=mi_eshop">
                                        <i class="icon icon-wb"></i>
                                    </a>

                                    <a class="icon-type btn-zfb" target="_blank" title="支付宝登录" href="/pass/sns/login/auth?appid=2088011127562160&&callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252F%253Fclient_id%253D180100041080%26sign%3DOGIxNzgyNjZlM2FlMTM2OWU1ZTJlYmQ4MzU1M2E2YzNlZWQ2Yjg1Nw%2C%2C&sid=mi_eshop">
                                        <i class="icon icon-zfb"></i>
                                    </a>

                                    <a class="icon-type btn-wx" target="_blank" title="微信登录" href="/pass/sns/login/auth?appid=wxxmzh&scope=snsapi_login&callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252F%253Fclient_id%253D180100041080%26sign%3DOGIxNzgyNjZlM2FlMTM2OWU1ZTJlYmQ4MzU1M2E2YzNlZWQ2Yjg1Nw%2C%2C&sid=mi_eshop">
                                        <i class="icon icon-wx"></i>
                                    </a>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <script type="text/javascript">
            (function () {
                let account =document.querySelector(".account");
                let sweep =document.querySelector(".sweep");
                function action1(){
                    account.style.color="#f56600";
                    sweep.style.color="#666";
                }
                function action2(){
                   account.style.color="#666";
                    sweep.style.color="#f56600";
                }
                account.addEventListener("click" , action1, false);
                sweep.addEventListener("click",action2 , false);
            })()
        </script>

    </body>
</html>